<!-- RadioGroup.svelte -->
<script context="module" lang="ts">
	// 1. 导出上下文键（供 RadioButton 导入）
	export const RADIO_GROUP_CONTEXT_KEY = Symbol('radio-group');

	// 2. 导出按钮注册的类型接口（补充 currentChecked）
	export interface RadioButtonRegistry {
		value: any;
		currentChecked: boolean; // 新增：缓存当前选中状态
		updateChecked: (checked: boolean) => void;
	}

	// 3. 导出上下文类型接口（供 RadioButton 导入使用）
	export interface RadioGroupContext {
		// 事件系统替代 Store
		register: (button: RadioButtonRegistry) => () => void;
		disabled: boolean;
		name: string;
		fill: string;
		textColor: string;
		size: 'small' | 'medium' | 'large';
		onSelect: (value: any) => void;
	}
	
</script>

<script lang="ts">
	// 普通脚本：处理组件实例逻辑（属性、上下文设置）
	import { setContext, onDestroy } from 'svelte';

	// 组件属性（普通脚本导出，用于组件外部传参）
	export let modelValue: any = null;
	export let disabled: boolean = false;
	export let name: string = `radio-group-${Math.random().toString(36).slice(2, 8)}`;
	export let fill: string = 'var(--color-fill-light)';
	export let textColor: string = 'var(--color-primary-600)';
	export let size: 'small' | 'medium' | 'large' = 'medium';
	export let className: string = '';

	// 双向绑定回调（遵循 Svelte 双向绑定规范）
	export let onChange: (value: any) => void = () => {};

	// 轻量级事件系统
	let buttons: RadioButtonRegistry[] = [];

	const register = (button:RadioButtonRegistry) => {
		buttons.push(button);
		// 立即更新初始状态
		const initialChecked = modelValue === button.value;
		button.currentChecked = initialChecked;
		button.updateChecked(initialChecked);

		// 返回取消注册函数
		return () => {
			const index = buttons.indexOf(button);
			if (index !== -1) {
				buttons.splice(index, 1); // 原地修改数组
			}
		};
	};

	// 3. 创建上下文对象（明确标注类型为 RadioGroupContext）
	const groupContext: RadioGroupContext = {
		register,
		disabled,
		name,
		fill,
		textColor,
		size,
		// 选中回调：更新 modelValue 并触发双向绑定
		onSelect: (value: any) => {
			if (value === modelValue) return; // 选中值未变化，直接返回			
			modelValue = value;
			onChange(value);
			// 通知所有按钮更新选中状态
			buttons.forEach((button) => {
				const shouldCheck = value === button.value;
				if (button.currentChecked !== shouldCheck) {
					// 对比缓存的状态
					button.updateChecked(shouldCheck);
					button.currentChecked = shouldCheck;
				}
			});
		}
	};

	// 4. 设置上下文（供子组件 RadioButton 获取）
	setContext(RADIO_GROUP_CONTEXT_KEY, groupContext);

	// 监听外部修改 modelValue 并同步
	$: if (modelValue !== undefined) {
		buttons.forEach((button) => {
			const shouldCheck = modelValue === button.value;
			if (button.currentChecked !== shouldCheck) {
				button.currentChecked = shouldCheck;
				button.updateChecked(shouldCheck);
			}
		});
	}

	// 5. 监听属性变化，同步更新上下文（确保属性修改后上下文同步）
	$: {
		groupContext.disabled = disabled;
		groupContext.name = name;
		groupContext.fill = fill;
		groupContext.textColor = textColor;
		groupContext.size = size;
	}
	onDestroy(() => {
		buttons = [];
	});
</script>

<!-- 组件内容：渲染子选项（RadioButton） -->
<div class={`radio-group ${className}`}>
	<slot />
</div>

<style>
	.radio-group {
		display: inline-flex;
		align-items: center;
		gap: 8px;	
	}
	.radio-group.button{
		gap: 0;
		padding: 4px;
		border-radius: var(--border-radius);
		background-color: var(--color-fill);		
	}

	/* 支持垂直排列（可选扩展） */
	.radio-group--vertical {
		flex-direction: column;
		align-items: flex-start;
	}
</style>
